<template>
  <div class="ringdiv" style="width: 80px;height: 80px;">
    <div :id="'container' + ringid" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import reslist from "./json/position.js";
import chartmixins from "./chartmixins.js";

export default {
  props: ["ringid", "data"],
  mixins: [chartmixins],
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    let trendChart = echarts.init(
      document.getElementById("container" + this.ringid)
    );

    window.addEventListener("resize", () => {
      trendChart.resize();
    });

    // 绘制图表
    let option = {
      backgroundColor: "#00082F",
      color: [this.data.color, "#00082F"],
      title: {
        text: "85%",
        x: "center",
        y: "center",
        itemGap: 20,
        textStyle: {
          color: "#ffffff",
          fontFamily: "微软雅黑",
          fontSize: 18
          // fontWeight : 'bolder'
        }
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      series: [
        {
          name: "占比",
          type: "pie",
          radius: ["65%", "80%"],

          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: "center"
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: "15",
                fontWeight: "bold"
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          itemStyle: {
            borderColor: "#053a76",
            borderWidth: 1
          },
          data: [
            {
              value: this.data.value,
              name: "设备正常"
            },
            {
              value: 100 - this.data.value,
              name: "设备异常"
            }
          ]
        }
      ]
    };

    trendChart.setOption(option);
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
</style>